<template>
  <div class="nav">
    <div class="nav-logo">
      <img src="@/assets/images/logo.png" alt="" @click="gotoHome" />
    </div>
    <div class="nav-warpper">
      <span @click="gotoHome" :class="{ ActiveClass: isActive == 1 }"
        >首页</span
      >
      <span @click="gotoEntry" :class="{ ActiveClass: isActive == 2 }"
        >信息录入</span
      >
      <span @click="gotoStatistics" :class="{ ActiveClass: isActive == 3 }"
        >数据统计</span
      >
      <span
        v-if="visibleUser == true"
        @click="gotoLogin"
        :class="{ ActiveClass: isActive == 4 }"
        >登录</span
      >
      <el-dropdown trigger="click" v-else>
        <p class="el-dropdown-link">欢迎您：{{ userName }}</p>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="exit">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const visibleUser = ref(true);
    const router = useRouter();
    const isActive = ref(1);
    const userName = ref("" as any);
    const gotoHome = () => {
      router.push("/");
    };
    const gotoEntry = () => {
      router.push("/entry");
    };
    const gotoStatistics = () => {
      router.push("/statistics");
    };
    const gotoLogin = () => {
      router.push("/login");
    };
    const exit = () => {
      localStorage.clear();
      router.push("/");
      if (router.currentRoute.value.path == "/") {
        visibleUser.value = true;
      }
    };
    watch(
      () => router.currentRoute.value.path,
      (Npath) => {
        if (Npath == "/") isActive.value = 1;
        if (Npath == "/entry") isActive.value = 2;
        if (
          Npath == "/analysis" ||
          Npath == "/userInfo" ||
          Npath == "/roomInfo" ||
          Npath == "/statisticsInfo"
        ) {
          isActive.value = 3;
        }
        if (Npath == "/login") isActive.value = 4;
        if (Npath == "/" && localStorage.getItem("userName")) {
          visibleUser.value = false;
          userName.value = localStorage.getItem("userName");
        }
        if (Npath == "/" && !localStorage.getItem("userName")) {
          visibleUser.value = true;
        }
      }
    );
    onMounted(() => {
      userName.value = localStorage.getItem("userName");
      if (userName.value) {
        visibleUser.value = false;
      } else {
        visibleUser.value = true;
      }
    });
    return {
      gotoHome,
      gotoEntry,
      gotoStatistics,
      gotoLogin,
      isActive,
      visibleUser,
      userName,
      exit,
    };
  },
});
</script>

<style lang="scss">
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 65px;
  background: #eee;
  &-logo{
    img{
      cursor: pointer;
    }
  }
  &-warpper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 80px;
  }
  span {
    display: inline-block;
    height: 24px;
    margin-right: 20px;
    cursor: pointer;
    color: #1296db;
  }
  span:hover {
    color: #035a99;
    font-weight: bold;
    border-bottom: 2px solid #035a99;
  }
  .ActiveClass {
    color: #035a99;
    font-weight: bold;
    border-bottom: 2px solid #035a99;
  }
  .el-dropdown {
    cursor: pointer;
    border: 1px solid #1296db;
    box-shadow: #1296db 1px 1px 2px 1px;
    height: 28px;
    line-height: 26px;
    border-radius: 5px;
    padding: 0 15px;
    color: #1296db;
    margin-right: 20px;
  }
}
</style>
